Documentation/ Flexbox

The flexbox system allows for the declaration and customization of flexible containers and items within those containers.

Flex Containers

Flexbox containers are declared with are declared using the obj-flex class. The contents of a flex container can either use the flex item classes detailed below to specify their widths, or they can have their own widths (in the case of images, for example).

Items in a flexible container will flow along their main axis and wrap along their cross axis unless otherwise specified. In the example below, there are 7 formatted divs with the main axis set as rows and the cross axis set as columns. Adjusting the screen size, you can see the divs flow from one row to the next as the screen becomes narrower.

  
    <div class="obj-flex">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Flex Direction

To change the direction of the items in the flexbox, use the following classes.

Class Description
.obj-flex-row This class causes items to flow left-to-right. This is the default behavior if no direction class is applied.
.obj-flex-row-reverse This class causes items to flow right-to-left.
.obj-flex-column This class causes items to flow top-to-bottom.
.obj-flex-column-reverse This class causes items to flow bottom-to-top.

Justify Content

These classes define how space is distributed between and around content items along the main axis of a flex container.

obj-flex--justify-content__start Pack items from the start of the container.
obj-flex--justify-content__end Pack items from the end of the container.
obj-flex--justify-content__center Pack items from the center of the container.
obj-flex--justify-content__flex-start Pack flex items from the start.
obj-flex--justify-content__flex-end Pack flex items from the end.
obj-flex--justify-content__between Distribute items evenly with the first item flush with the start and the last item flush with the end.
obj-flex--justify-content__around Distribute items evenly with a half-sized space on either end.
obj-flex--justify-content__evenly Distribute items with equal space around them.
obj-flex--justify-content__stretch Distribute items evenly, with 'auto' sized items stretched to fit container.

Align Content

These classes define how space is distributed between and around content items along the cross axis of a flex container.

obj-flex--align-content__start Pack items from the start of the container.
obj-flex--align-content__end Pack items from the end of the container.
obj-flex--align-content__center Pack items from the center of the container.
obj-flex--align-content__flex-start Pack flex items from the start.
obj-flex--align-content__flex-end Pack flex items from the end.
obj-flex--align-content__space-between Distribute items evenly with the first item flush with the start and the last item flush with the end.
obj-flex--align-content__space-around Distribute items evenly with a half-sized space on either end.
obj-flex--align-content__space-evenly Distribute items with equal space around them.
obj-flex--align-content__stretch Distribute items evenly, with 'auto' sized items stretched to fit container.

Align Items

These classes set the align self property on all direct children of the flex container. It controls alignment on the cross axis.

obj-flex--align-content__start Pack items from the start.
obj-flex--align-content__end Pack items from the end.
obj-flex--align-content__center Pack items from the center of the container.
obj-flex--align-content__flex-start Pack flex items from the start.
obj-flex--align-content__flex-end Pack flex items from the end.
obj-flex--align-content__baseline Align items with the flex container baseline.
obj-flex--align-content__stretch Flex items are stretched along the cross axis while respecting width and height constraints.

No Wrap

Use the class obj-flex--nowrap on the flex container to prevent items inside of it from wrapping to the next column/row.

Flex Items

The flex item classes grant control over the items inside a flexible container using the obj-flex-item class. There are classes to control the width, alignment, and growth of flex items.

Width Classes

The obj-flex-item width classes provide a mechanism for defining the width of items inside a flex container. These classes are not mandatory if the items inside the flex container have their width specified some other way. You can use responsive modifiers (@sm, @md, @lg, @xl) to adjust the width of flex items at different breakpoints.

obj-flex-item__xs Assigns a 10em width
obj-flex-item__sm Assigns a 15em width
obj-flex-item__md Assigns a 20em width (default)
obj-flex-item__lg Assigns a 30em width
obj-flex-item__xl Assigns a 45em width

Align Self

This property sets the cross axis alignment for items inside a flex container. It will overwrite the align-items value if one has been set on the parent container. Several of these properties produce similar results. For more information, please see the MDN align-self documentation and the W3C CSS box alignment specification.

obj-flex-item--align-self__start Align the item at the start
obj-flex-item--align-self__end Align the item at the end
obj-flex-item--align-self__self-start Align the item flush at the start
obj-flex-item--align-self__self-end Align the item flush at the end
obj-flex-item--align-self__flex-start Align the flex item at the start
obj-flex-item--align-self__flex-end Align the flex item at the end
obj-flex-item--align-self__center Align the item at the center
obj-flex-item--align-self__stretch Stretch auto-sized items to fit the container
obj-flex-item--align-self__baseline Align the item along the baseline
obj-flex-item--align-self__auto Use parent's align-items value

Flex Grow

This property specifies how much space a flex item should take up along the main axis relative to other items. For example, an item with a flex grow value of 2 would take up twice as much space as an item with a flex grow value of 1. You can use the following classes to assign a flex grow value to a flex item: